<template>
  <div class="manage-box">
    <div class="manage-content">
      <div class="title">社区运行状态</div>
      <div class="people">
        <div class="label"><i class="ico-people"></i>人口</div>
        <div class="content">
          <div class="item">
            <span>100万</span>
            <span>常住人口</span>
          </div>
          <div class="item">
            <span>60万</span>
            <span>外来人口</span>
          </div>
        </div>
      </div>
      <!--echarts图-->
      <div class="main-manage"></div>
      <!--管理分类显示-->
      <div class="manage-legend">
        <div v-for="(item, i) in peopleData" :key="i"><span :style="{background: item.color}"></span><i>{{ item.name}}</i><b>{{item.num}}</b></div>
      </div>
      <div class="line"></div>
      <div class="people">
        <div class="label"><i class="ico-house"></i>房屋</div>
        <div class="content" style="padding-left: 10px">
          <div class="item">
            <span>20</span>
            <span>楼栋数</span>
          </div>
          <div class="item">
            <span>3000</span>
            <span>总户数</span>
          </div>
          <div class="item">
            <span>79.6%</span>
            <span>入住率</span>
          </div>
        </div>
      </div>
      <div class="fire-safety-bg">
        <span :class="'BG'+index" v-for="(item,index) in fireSafetyData" :key="index" :style="{'width':setIBg(item.fireSafetyCount)}"></span>
      </div>
      <div class="fire-safety-list">
        <ul>
          <li v-for="(item,index) in fireSafetyData" :key="index"><span :class="'BG'+index"></span><em>{{item.fireSafetyName}}</em><i>{{item.fireSafetyCount}}</i></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'stopManage',
  data () {
    return {
      chart: '',
      peopleData: [{ name: '党员', num: 152, color: '#50E3C2' }, { name: '重点关注', num: 48, color: '#FFCB17' }, { name: '志愿者', num: 64, color: '#409EFF' }, { name: '群防力量', num: 100, color: '#F5616E' }], // 人员类型数据
      fireSafetyData: [
        {
          fireSafetyId: '01',
          fireSafetyName: '自住',
          fireSafetyCount: 98
        },
        {
          fireSafetyId: '02',
          fireSafetyName: '租户',
          fireSafetyCount: 62
        },
        {
          fireSafetyId: '03',
          fireSafetyName: '空关',
          fireSafetyCount: 48
        }
      ],
      // fireSafetyData2: [],
      fireSafetyDataCount: 0
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    option: {
      type: Object,
      default () {
        return {
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              avoidLabelOverlap: false,
              silent: true,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  // borderRadius: 4,
                  formatter: function (argument) {
                    let html = `264\n总数`
                    return html
                  },
                  textStyle: {
                    fontSize: 16,
                    color: '#50E3C2'
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  borderColor: 'rgba(43, 54, 72, .9)'
                }
              },
              hoverAnimation: false,
              center: ['15%', '40%'],
              data: [
                {
                  value: 0,
                  itemStyle: {
                    color: '#50E3C2'
                  }
                },
                {
                  value: 0,
                  itemStyle: {
                    color: '#00A5ED'
                  }
                },
                {
                  value: 0,
                  itemStyle: {
                    color: '#202835'
                  }
                },
                {
                  value: 0,
                  itemStyle: {
                    color: '#202835'
                  }
                }
              ]
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.getChart()
    this.setCountData()
  },
  methods: {
    getChart () {
      let temp = this.option
      let length = this.peopleData.length
      for (let i = length - 1; i >= 0; i--) {
        temp.series[0].data[i].value = this.peopleData[i].num
        temp.series[0].data[i].itemStyle.color = this.peopleData[i].color
      }
      this.chart = this.$echarts.init(document.getElementsByClassName('main-manage')[0])
      this.chart.setOption(this.option)
    },
    setCountData () {
      let count = 0
      // let that = this
      this.fireSafetyData.forEach(function (item, index) {
        count += item.fireSafetyCount
      })
      this.fireSafetyDataCount = count
    },
    setIBg (n) {
      let count = this.fireSafetyDataCount
      let result = n / count * 100
      return parseInt(result) + '%'
    }
  }
}
</script>

<style lang="less" scoped>
.manage-box {
  width: 100%;
}

.manage-content {
  border-radius: 4px;
  width: 100%;
  padding: 16px 20px;
  box-sizing: border-box;
  background: rgba(43, 54, 72, 0.7);
  .title {
    color: #fff;
    margin-bottom: 10px;
  }
  .people {
    height: 50px;
    display: flex;
    justify-content: space-between;
    .label {
      width: 100px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      background: #2b3648;
      border-radius: 4px;
      .ico-people {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url('../../../assets/images/icons/icon-renkou.png')
          no-repeat;
        background-size: contain;
        vertical-align: text-top;
        margin-right: 5px;
      }
      .ico-house {
        display: inline-block;
        width: 30px;
        height: 18px;
        background: url('../../../assets/images/icons/icon-fangwu.png')
          no-repeat;
        background-size: contain;
        vertical-align: text-top;
        margin-right: 5px;
      }
    }
    .content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding-left: 40px;
      .item {
        text-align: right;
        > span {
          display: block;
        }
        span:first-child {
          font-size: 14px;
          font-weight: 700;
          color: #4fe3c1;
        }
        span:last-child {
          font-size: 12px;
          color: #9facc3;
        }
      }
      .item:last-child {
        span:first-child {
          color: #409eff;
        }
      }
    }
  }
  .main-manage {
    height: 110px;
    position: relative;
  }
  .manage-legend {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    position: absolute;
    top: 116px;
    right: 20px;
    i {
      font-style: normal;
      color: #9facc3;
      font-size: 12px;
    }
    b {
      float: right;
      font-size: 14px;
      color: #50e3c2;
      font-weight: normal;
    }
    span {
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      width: 8px;
      height: 8px;
      display: inline-block;
      margin-right: 9px;
    }
    div {
      width: 90px;
      line-height: 30px;
      color: #fff;
      margin-left: 10px;
    }
  }
  .fire-safety-bg {
    margin-top: 10px;
    height: 10px;
    letter-spacing: -5px;
    font-size: 0;
    width: 100%;
    span {
      letter-spacing: normal;
      box-sizing: border-box;
      vertical-align: top;
      display: inline-block;
      height: 10px;
      border-left: 1px solid rgba(43, 54, 72, 0.95);
      &:first-child {
        border-left: 0;
      }
      &.BG0 {
        background: #50e3c2;
      }
      &.BG1 {
        background: #4a90e2;
      }
      &.BG2 {
        background: #ffcb16;
      }
    }
  }
  .fire-safety-list {
    padding: 13px 0;
    ul {
      letter-spacing: -5px;
      font-size: 0;
      li {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        font-size: 12px;
        color: #9facc3;
        height: 24px;
        line-height: 24px;
        width: 33%;
        span {
          display: block;
          float: left;
          width: 10px;
          height: 10px;
          border-radius: 2px;
          margin-top: 7px;
          margin-right: 10px;
          &.BG0 {
            background: #50e3c2;
          }
          &.BG1 {
            background: #00a5ed;
          }
          &.BG2 {
            background: #ffcb16;
          }
          &.BG3 {
            background: #c2c2c2;
          }
        }
        em {
          font-style: normal;
          width: 40px;
          display: block;
          float: left;
        }
        i {
          font-size: 14px;
          color: #50e3c2;
          font-style: normal;
        }
      }
    }
  }
}
.line {
  width: 280px;
  height: 1px;
  margin-bottom: 20px;
  background: #35435d;
}
</style>
